<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.shang{
		overflow: hidden;
	}
	.shang li{
		float: left;
		width: 100px;
		height: 30px;
		border: 1px solid red;
	}
	.xia{
		/* overflow: hidden; */
		position: relative;
	}
	.xia li{
		position: absolute;
		float: left;
		width: 405px;
		height: 150px;
		border: 1px solid red;
	}
	.shang .zz{
		background-color: blue;
	}
	.xia .zz{
		display: none;
		/* display: block; */
	}
	
	
</style>
<body>
	<ul class="shang">
		<li class="zz">1111</li>
		<li>2222</li>
		<li>3333</li>
		<li>4444</li>
	</ul>
	
	<ul class="xia">
		<li class="zz" style="display: block;">1111</li>
		<li class="zz">2222</li>
		<li class="zz">3333</li>
		<li class="zz">4444</li>
	</ul>
	
</body>
<script>
	var shang=document.querySelectorAll('.shang li');
	// console.log(shang)
	var xia=document.querySelectorAll('.xia li')
	
	for(var i=0;i<shang.length;i++){
	   shang[i].setAttribute('index',i)
		shang[i].onclick=function(){
			
			for(var i=0;i<shang.length;i++){
				shang[i].classList=''
				xia[i].style.display='none'
				
			}
			
			this.classList='zz'
		 var index=	this.getAttribute('index');
			xia[index].style.display='block'
			
			// xia[getAttribute('index')].style.display='block'
			
		}
	}
	
</script>
</html>